<template>
    <v-card
        style="width: 222px; height: 222px"
        @mouseenter="hovered(true)"
        @mouseleave="hovered(false)"
    >
        <v-card-item
            class="others"
            :style="{
                background: !isHover ? 'white' : 'rgba(237, 237, 237, 0.4)'
            }"
            v-if="isHover || isCollect"
        >
            <template
                v-slot:prepend
                v-if="!isDelete"
            >
                <v-icon
                    v-if="!isCollect"
                    @click="Collect"
                    >mdi-star-outline</v-icon
                >
                <v-icon
                    v-else
                    @click="Collect"
                    >mdi-star</v-icon
                >
            </template>
            <template
                v-slot
                v-if="!isDelete"
            >
                <v-icon
                    @click="modifyDialog = true"
                    v-if="!isCollect || isHover"
                    >mdi-cog</v-icon
                >
            </template>
            <template v-slot:append>
                <v-icon
                    @click="deleteDialog = true"
                    v-if="(!isCollect || isHover) && !isDelete"
                    >mdi-trash-can-outline</v-icon
                >
                <v-icon
                    v-if="(!isCollect || isHover) && isDelete"
                    @click="recover"
                    >mdi-arrow-u-left-top</v-icon
                >
                <v-icon
                    v-if="(!isCollect || isHover) && isDelete"
                    @click="trueDel"
                    >mdi-trash-can-outline</v-icon
                >
            </template>
        </v-card-item>
        <v-dialog
            v-model="modifyDialog"
            persistent
            width="auto"
        >
            <v-card>
                <v-icon
                    @click="modifyDialog = false"
                    style="position: absolute; right: 0%"
                    >mdi-close</v-icon
                >
                <span
                    style="
                        padding: 3% 0 0 50px;
                        font-size: large;
                        font-weight: 800;
                    "
                    >MODIFY</span
                >
                <v-sheet
                    width="500"
                    class="mx-auto"
                    style="padding: 20px 50px 50px 50px"
                >
                    <v-form ref="form">
                        <v-text-field
                            v-model="title"
                            label="Title"
                            :placeholder="cardData.title"
                            :rules="titleRules"
                        ></v-text-field>

                        <v-text-field
                            v-model="introduction"
                            label="introduction"
                            :placeholder="cardData.introduction"
                        ></v-text-field>

                        <v-btn
                            @click="modify"
                            block
                            class="mt-2"
                            >SUBMIT</v-btn
                        >
                    </v-form>
                </v-sheet>
            </v-card>
        </v-dialog>
        <v-dialog
            v-model="deleteDialog"
            persistent
            width="auto"
        >
            <v-card style="width: 400px">
                <v-icon
                    @click="deleteDialog = false"
                    style="position: absolute; right: 0%"
                    >mdi-close</v-icon
                >
                <v-card-text style="padding-top: 10%">
                    Are you sure {{ this.delOrRecover }} the
                    project?</v-card-text
                ><v-card-actions>
                    <div style="position: absolute; right: 0%">
                        <v-btn
                            @click="DelOrRecover"
                            style="color: cadetblue"
                            >SUBMIT</v-btn
                        >
                        <v-btn @click="deleteDialog = false">CANCEL</v-btn>
                    </div>
                </v-card-actions>
            </v-card>
        </v-dialog>

        <v-card-item style="position: absolute; top: 10%">
            <v-card-title
                ><span>{{ cardData.title }}</span></v-card-title
            >
            <div style="font-size: 12px; ">
                <p>
                    <span style="color:darkcyan;">CREATE&nbsp;:</span>
                    {{
                        cardData.create_time
                            .replace(RegExp('\\.[0-9]+'), '')
                            .replace('T', ' ')
                            .replace('-', '-', 1)
                            .replace('-', '-', 1)
                    }}
                </p>
                <p >
                    <span style="color:darkcyan">MODIFY:</span>
                    {{
                        cardData.modify_time
                            .replace(RegExp('\\.[0-9]+'), '')
                            .replace('T', ' ')
                            .replace('-', '-', 1)
                            .replace('-', '-', 1)
                    }}
                </p>
            </div>
            <v-card-text style="padding: 0%">{{
                cardData.introduction
            }}</v-card-text>
        </v-card-item>
        <v-card-actions style="position: absolute; right: 0%; bottom: 0%">
            <v-btn @click="toDesignPage">Click me</v-btn>
        </v-card-actions>
    </v-card>
</template>
<script>
import { useManageStore } from '../../..//stores/manage.js'
const projectManage = useManageStore()
export default {
    props: {
        cardData: {}
    },
    data() {
        return {
            isCollect: this.cardData.isCollect,
            isDelete: this.cardData.isDelete,
            isHover: false,
            modifyDialog: false,
            deleteDialog: false,
            delOrRecover: 'delete',
            title: this.cardData.title,
            titleRules: [
                (value) => {
                    let label = /^\s*$/
                    let reg = new RegExp(label)
                    if (value?.length > 0 && !reg.test(value)) return true
                    return 'Title cannot be empty'
                }
            ],
            introduction: this.cardData.introduction
        }
    },
    methods: {
        hovered(status) {
            this.isHover = status
        },
        Collect() {
            this.$emit('handleCollectCard', this.cardData.project_id)
            this.isCollect = !this.isCollect
        },
        DelOrRecover() {
            this.$emit(
                'handleDeleteCard',
                this.cardData.project_id,
                this.delOrRecover
            )
        },
        recover() {
            this.deleteDialog = true
            this.delOrRecover = 'recover'
        },
        trueDel() {
            this.deleteDialog = true
            this.delOrRecover = 'strikeout'
        },
        async modify() {
            const { valid } = await this.$refs.form.validate()
            if (valid) {
                this.$emit(
                    'handleModifyCard',
                    this.cardData.project_id,
                    this.title,
                    this.introduction
                )
            }
        },
        toDesignPage() {
            this.$emit('toDesignPage', this.cardData.project_id)
        }
    }
}
</script>
<style>
.others {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;
}

span {
    cursor: default;
}
</style>
